import React, { useState } from 'react'
import './style/login.scss'
import { useNavigate } from 'react-router-dom'
import { Toast } from 'antd-mobile'
import axios from 'axios'
import 'animate.css'

export default function LoginY() {
  let nav=useNavigate()
  let [tel, setTel] = useState('')
    let [code, setCode] = useState('')
  let [min, setMin] = useState(60)
  let [rcode,setrCode]=useState('')
  return (
    <div className='login'>
          <h1>您好</h1>
          <div className='input'>
            <input value={tel} placeholder='手机号' onChange={(e)=>{setTel(e.target.value)}}></input>
              <p className='Ycode'>
                  <input value={code} placeholder='验证码' onChange={(e) => { setCode(e.target.value) }}></input>
          <button onClick={async () => {
            let res = await axios.post('http://localhost:3000/zjj/get_sms', { tel })
            console.log(res);
                    if (res.data.code === 200) {
                      setrCode(res.data.sms)
                    } else {
                      console.log(res.data.msg);
                    }
                    let timer = setInterval(() => {
                      console.log(min);
                      setMin(min--)
                      if (min - 1 < 0) {
                        clearInterval(timer)
                        setMin(60)
                        }
                  },1000)
                  }} disabled={min!==60}>{(min===60||min===0)?'获取验证码':`${min}s重新获取` }</button>
              </p>
            <p><span onClick={()=>{nav('/login')}} className='Y'>密码登录</span></p>
            <button className='animate__animated animate__slideInUp' onClick={async() => {
            if (code !== rcode) {
            Toast.show({
              content:'验证码错误！'
            })
            return false
          }
          let obj = {tel}
          let res = await axios.post('http://localhost:3000/zjj/loginY', obj)
          if (res.data.code === 200) {
            // Toast.show({
            //   content:'注册成功，将转跳到登录页'
            // })
            // console.log(res.data);
            // Toast.show({
            //   content:res.data.msg
            // })
            sessionStorage.setItem('token', res.data.accessToken)
            sessionStorage.setItem('refToken', res.data.refToken)
            sessionStorage.setItem('_id',res.data._id)
            sessionStorage.setItem('tel',tel)
            nav('/jjthome')
          } else {
            console.log(res.data);
            Toast.show({
              content:res.data.msg
            })
          }
            }}>登录</button>
          </div>
          <p className='footer'>还没有账号？<span onClick={()=>{nav('/register')}}>去注册</span></p>
    </div>
  )
}
